<template>
<div class="scroll-wrap">
    <ul class="scroll-content" :style="{ top }">
        <li v-for="item in prizeList">{{item.name}}</li >  
    </ul>
</div>
</template>

<script>
export default {
  data () {
    return {
    //   prizeList: [
    //     { name: '呵呵' },
    //     { name: '萨达' },
    //     { name: '死阿' },
    //     { name: 'ad倒' },
    //     { name: '是阿' }
    //   ],
      activeIndex: 0
    }
  },
  props : {
        prizeList: {
            type: Array,
            defaults: []
    }
  },

  computed: {
    top() {
      return - this.activeIndex * 50 + 'px';
    },
    transition() {
        return this.activeIndex === 0 ? 'none' : 'top 0.5s';
    }
  },

  mounted() {
    setInterval(_ => {
      if(this.activeIndex < this.prizeList.length-1) {
        this.activeIndex += 1;
      } else {
        this.activeIndex = 0;
      }
    }, 2000);
  }
};
</script>

<style>
.scroll-wrap{
  width: 200px;
  height: 50px;
  border: 1px solid blue;
  overflow: hidden;
}

.scroll-content{
  position: relative;
  transition: top 0.5s;

  margin-top: 0px;
  margin-bottom: 0px;
}
 li{
    line-height: 50px;
    text-align: left;
    list-style: none;
    overflow: hidden;
    width: 150px;
 }

</style>
